﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Product.aspx.cs" Inherits="Demo.Product" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Content/bootstrap.css" rel="stylesheet" />
    <style>
        .smallImg {
            margin-right: 10px;
            cursor: pointer;
            margin-top: 10px;
        }

        #buy_count {
            width: 50px;
            display: inline-block;
            margin-right: 20px;
            margin-left: 10px;
        }

        .container {
            padding: 20px;
            width: 1100px;
            margin: 0px auto;
        }

        .form-group {
            display: flex;
            align-content: center;
        }

        /*购物车*/
        .shopCar {
            position: fixed;
            right: 5px;
            bottom: 50px;
            border: 1px solid #808080;
            display: flex;
            flex-direction: column;
            align-content: center;
            justify-content: center;
            align-items: center;
            width: 30px;
            height: 100px;
        }

        #ProCount {
            width: 10px;
            background: #ff0000;
            display: flex;
            justify-content: center;
            align-content: center;
            margin-top: 3px;
        }
        /*购物车*/
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <div class="container">
            <div class="row">
                <div class="col-md-6">

                    <!--图片展示-->
                    <div class="bigImg">
                        <asp:Image runat="server" ID="proImg" Width="470" Height="300"></asp:Image>
                    </div>
                    <div class="smallImg">
                        <asp:DataList runat="server" ID="DlProImg" RepeatColumns="3">
                            <ItemTemplate>
                                <div class="smallImg">
                                    <img src="images/<%# Eval("Image") %>" width="150" height="150" />
                                </div>
                            </ItemTemplate>
                        </asp:DataList>
                    </div>
                    <!--图片展示-->

                </div>
                <div class="col-md-6  form-horizontal">

                    <div style="width: 150px;" class="form-group">
                        <label class="col-md-5 badge text-center">商品名:</label>
                        <div class="col-md-7"><%= product.GName %></div>
                    </div>

                    <div class="form-group" style="width: 150px;">
                        <label class="col-md-5 badge  text-center">价格:</label>
                        <div class="price col-md-7"><%= string.Format("{0:C}",product.Price) %></div>
                    </div>
                    <div class="form-group" style="width: 150px;">
                        <label class="badge col-md-5  text-center">地址:</label>
                        <div class="address col-md-7"><%= product.Address %></div>
                    </div>

                    <div class="form-group">购买数量:<input runat="server" id="buy_count" class="form-control" value="1" /><asp:Button runat="server" ID="BtnBuy" Text="加入购物车" CssClass="btn btn-lg " OnClick="BtnBuy_Click" /></div>
                </div>
            </div>
        </div>

        <!--购物车-->
        <a href="ShopCar.aspx">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <div class="shopCar badge "><span>购</span><span>物</span><span>车</span><span class="label  badge" runat="server" id="ProCount"></span></div>
                    <asp:Timer ID="Timer1" runat="server" Interval="200" OnPreRender="Timer1_PreRender" OnTick="Timer1_Tick" Enabled="True"></asp:Timer>
                </ContentTemplate>
            </asp:UpdatePanel>
        </a>
        <!--购物车-->
    </form>
    <script src="Scripts/jquery-3.0.0.js"></script>
    <script>
        $(".smallImg img").click(function () {
            $("#proImg").prop("src", $(this).prop("src"));
        });
    </script>
</body>
</html>
